//编辑商品
//添加商品
import { PlusOutlined } from '@ant-design/icons';
import myAxios from "../../../utils/myAixos"
import {
    Button,
    Modal,
    Form,
    Input,
    Radio,
    Upload,
    message,
    Select
} from 'antd';
import { useEffect, useState } from 'react';
import {useLocation, useNavigate } from "react-router-dom"
import './addpro.css'
const { TextArea } = Input;




const ChangePro = () => {
    const [isModalOpen, setIsModalOpen] = useState(false);//模态框状态
    const navigat = useNavigate()//返回使用
    let location=useLocation()  //接收页面传参
    const [form] = Form.useForm();
    const { setFieldsValue } = form;
     
 
    useEffect (()=>{// 跳转页面渲染数据
       setFieldsValue({
        p_shoptype:location.state.record.p_shoptype,
        p_name:location.state.record.p_name,
        p_money:location.state.record.p_money,
        p_introduce:location.state.record.p_introduce,
        p_id:location.state.record.p_id,
        p_status:location.state.record.p_status,

    })
    },[]) 


    const gouback = () => {
        navigat(-1)
    }

    //normFile 文件上传必备
    const normFile = (e) => {
        console.log('上传文件对象:', e);
        if (Array.isArray(e)) {
            return e;
        }
        return e?.fileList;
    };
    //点击提交，弹框出现
    let [upvalues,setvalues]=useState()
    const onFinish = (values) => {
        console.log(values);
        setIsModalOpen(true);
        setvalues(values)
    };
   
    const handleOk = () => {
        setIsModalOpen(false);
        console.log(upvalues);
        console.log(location.state.record.p_id);
        //点击模态框确认，在这里发起请求
        let myformData=new FormData()
        myformData.append('p_introduce',upvalues.p_introduce)//商品介绍
        myformData.append('p_money',upvalues.p_money)//商品价格
        myformData.append('p_name',upvalues.p_name)//商品名称
        myformData.append('p_shoptype',upvalues.p_shoptype)//商品类型
        myformData.append('p_status',upvalues.p_status)//商品状态  上线下线
        myformData.append('id',location.state.record.p_id)//商品id
        myformData.append('myFile',upvalues.image[0].originFileObj)
        myAxios({
            url: "/shopEditts",
            method:"post",
            data:myformData
    
        }).then(res=>{
            if(res.data.status===200){
                console.log(res);
                message.success('修改成功')
                navigat('/HomePage/ShopList')
              }else{
                 //跳转到404页面 
              }
             
        })
    };
    const handleCancel = () => {
        setIsModalOpen(false);
    };
    //渲染的内容
    return (
        <div>
            <header className='header1'>
                <div>
                </div>
                <div onClick={gouback}>
                  <Button block='true'>返回</Button>
                </div>
            </header>
            <section className='section1'>
                <Form form={form}
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 14 }}
                    layout="horizontal"
                    style={{ maxWidth: 600 }}
                    onFinish={onFinish}
                >
                    <Form.Item label="商品类型" name='p_shoptype' 
                    rules={[{ required: true, message: '请选择商品类型!' }]}
                  
                    >
                        <Radio.Group>
                            <Radio value="实物商品"> 实物商品 </Radio>
                            <Radio value="虚拟商品"> 虚拟商品 </Radio>
                            <Radio value="积分商品"> 积分商品 </Radio>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item label="商品名称" name='p_name'  rules={[{ required: true, message: '请输入商品名称!' }]}>
                        <Input placeholder='请输入商品名称' />
                    </Form.Item>
                    <Form.Item label="商品价格" name='p_money' rules={[{ required: true, message: '请输入商品价格!' }]}>
                        <Input placeholder='请输入价格' />
                    </Form.Item>
                    <Form.Item label="商品状态" name='p_status'  rules={[{ required: true, message: '请选择商品状态!' }]}>
                        <Select

                            defaultValue=""
                            style={{
                                width: 140,
                                marginRight: 20
                            }}
                            options={[
                                {
                                    value: '上线',
                                    label: '上线',
                                },
                                {
                                    value: '下线',
                                    label: '下线',
                                },
                            ]}
                        />

                    </Form.Item>

                    <Form.Item label="商品介绍" name='p_introduce'  rules={[{ required: true, message: '请填写商品介绍!' }]}>
                        <TextArea rows={8} />
                    </Form.Item>                                           {/* 获取上传文件的信息，必填 */}
                    <Form.Item label="商品图片" valuePropName="fileList"
                     rules={[{ required: true, message: '请选择商品图片!' }]}
                        getValueFromEvent={normFile} name='image'
                    >

                        <Upload action="/upload.do" listType="picture-card"  >
                            <div>
                                <PlusOutlined />
                                <div style={{ marginTop: 8 }}>上传</div>
                            </div>
                        </Upload>


                    </Form.Item>

                    <Button type="primary" htmlType="submit" style={{marginRight:50}}>完成，保存提交</Button>

                </Form>

            </section>


            <Modal title="提示"
                open={isModalOpen}
                onOk={handleOk}
                onCancel={handleCancel}
                cancelText='否'
                okText='是'
                centered='true'
            >
                <p style={{ textAlign: 'center', height: '100px', fontSize: '18px', marginTop: '20px' }}>确认上传商品</p>
            </Modal>

        </div>
    );
};



export default ChangePro;